<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>用户注册丨坚球书城</title>
  <script src="js/vue.js"></script>
  <script src="element-ui/lib/index.js"></script>
  <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
  <script src="js/axios-0.18.0.js"></script>

</head>
<body>
<div id="app">
  <el-container>
    <el-header>
      <el-header style="text-align: right; font-size: 12px; ">
        <a href="#" style="float: left;">
          <span><img style="height: 70px;margin-top: 10px" src="http://r3vta9mus.hb-bkt.clouddn.com/nutLogo.png" alt=""></span>
        </a>
        <span style="float: left;margin-top: 20px;font-size: 40px">丨用户注册</span>
      </el-header>
    </el-header>
    <el-main>
      <el-row :gutter="20" style="margin-top: 60px">
        <el-col :offset="7" :span="10">
          <el-form ref="form" :model="formData" :rules="rules" size="medium" label-width="100px"
                   label-position="top">
            <el-form-item label="用户名" prop="username">
              <el-input v-model="formData.username" placeholder="请输入用户名" clearable prefix-icon='el-icon-user'
                        :style="{width: '100%'}"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
              <el-input v-model="formData.password" placeholder="请输入密码" clearable show-password
                        :style="{width: '100%'}"></el-input>
            </el-form-item>
            <el-form-item label="邮箱" prop="email">
              <el-input v-model="formData.email" placeholder="请输入邮箱" clearable :style="{width: '100%'} "></el-input>
            </el-form-item>
            <el-form-item label="验证码">
              <el-input v-model="formData.code" placeholder="请输入验证码" clearable :style="{width: '50%'}"></el-input>
              <img alt="" src="kaptcha.jpg" style="float: right; margin-right: 80px; width: 110px; height: 30px">
            </el-form-item>
            <el-form-item size="large" >
              <el-button type="primary" @click="submitForm">注册</el-button>
              <el-button @click="resetForm">重置</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </el-main>
    <el-footer height="50px" style="text-align: center;">坚球书城.Copyright ©2021</el-footer>
  </el-container>
</div>
</body>
<script>

  const vm = new Vue({
    el: '#app',
    data: {
      formData: {
        username: '',
        password: undefined,
        email: undefined,
        code:''
      },
      rules: {
        username: [{
          required: true,
          message: '请输入用户名',
          trigger: 'blur'
        }],
        password: [{
          required: true,
          message: '请输入密码',
          trigger: 'blur'
        }],
        email: [{
          trigger: 'blur',
          pattern: /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/,message:'请输入正确邮箱格式'
        }]
      },
    },
    methods: {
      submitForm() {
          // TODO 提交表单
        var that = this
          axios({
            method:'get',
            url:`http://localhost:8080/Book/userServlet?action=regist&username=${that.formData.username}&password=${that.formData.password}&email=${that.formData.email}&code=${that.formData.code}`,
            // url:'http://localhost:8080/Book/userServlet?action=regist&username='+that.formData.username
          }).then(function (response){
            console.log(response)
            if (response.data.code!==20000){
              that.$message({
                message: response.data.data.msg,
                type: 'warning'
              });
              setTimeout(function () {
                window.location.href='register.html'
              },2000)
            }else {
              that.$message({
                message: '恭喜你，注册成功！',
                type: 'success'
              });
              setTimeout(function () {
                window.location.href='index.html'
              },2000)
            }
          })
      },
      resetForm() {
        this.$refs['form'].resetFields()
      },
    }
  })

</script>
</html>